<template>
  <a-spin :spinning="confirmLoading">
    <a-upload-dragger
      :multiple="false"
      :accept="accept"
      :fileList="fileListData"
      :remove="handleRemove"
      :beforeUpload="beforeUpload"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p class="ant-upload-hint">支持扩展名：{{ accept }}</p>
    </a-upload-dragger>
    <div class="ant-upload-matter">
      <p>注意事项：</p>
      <p>1.请勿修改模版格式，以免导入失败；</p>
    </div>
  </a-spin>
</template>

<script>
import { importExcel } from '@/api/warning/WarningData.js'
export default {
  data() {
    return {
      confirmLoading: false,
      fileListData: [],
      accept: '.xls,.xlsx', // 导入的文件格式
      fileListData: [],
      result: {
        // correctPhoneNum: 1,
        // errorPhoneList: [
        //   {phone: '15256565556', checkErrortype: '号码格式有误'}
        // ],
        // errorPhoneNum: 1
      }
    }
  },
  computed: {
    isDisabled() {
      return this.fileListData.length > 0 ? false : true
    }
  },
  methods: {
    show(record) {
      this.model = record ? Object.assign({}, record) : this.model
      this.id = record ? record.id : ''
    },
    submitForm() {
      const { fileListData } = this
      if(fileListData && fileListData.length===0) {
        this.$message.error('请选择导入文件')
        return
      }
      const formData = new FormData()
      fileListData.forEach(file => {
        formData.append('files', file)
      })
      this.confirmLoading = true
      importExcel(formData).then((res) => {
        if (res.success) {
          this.confirmLoading = false
          this.$emit('finish', res.result)
        } else {
          this.confirmLoading = false
          this.$error({
            title: '提示',
            content: h => <span domPropsInnerHTML={res.message} />
          })
        }
      })
      .catch((e) => {
        this.confirmLoading = false
        this.$message.error('导入出错了')
      })
    },
    //上传前拦截
    beforeUpload(file) {
      this.fileListData = [file] //[...this.fileListData, file];
      return false
    },
    // 移除
    handleRemove(file) {
      const index = this.fileListData.indexOf(file)
      const newFileList = this.fileListData.slice()
      newFileList.splice(index, 1)
      this.fileListData = newFileList
    }
  }
}
</script>

<style scoped lang="less">
/deep/.ant-upload-matter {
  padding: 30px 0 0;
  p {
    margin-bottom: 0;
  }
}
/deep/.ant-modal-footer {
  position: relative;
  .footer-model {
    position: absolute;
    left: 20px;
    &::before {
      content: '*';
      color: #f5222d;
      margin-right: 5px;
    }
  }
}
</style>
